<template>
  <div class="container">
    <div class="login-wrap">
      <div class="login-left">
        <div class="login-ad"><img src="../../static/img/login_left.png" /></div>
      </div>
      <div class="login-right">
        <div class="forget-pwd">
          <div class="login-title">忘记密码</div>
          <div class="login-con">
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="phone" placeholder="请输入手机号">
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-person.png" /></el-input>
              </div>
            </div>
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="code" placeholder="请输入验证码" style="width:255px">
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-pass.png" />
                </el-input>
               <el-button type="primary"  :class="[ 'code-btn', disabled ? 'el-button-code-disabled' : '',]" @click="bindSendCode" :disabled="disabled">{{btnTitle}}</el-button>
              </div>
            </div>
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="password" placeholder="请输入密码,至少6个字符" show-password>
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-pass.png" />
                </el-input>
              </div>
            </div>
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="confirmPwd" placeholder="确认密码" show-password>
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-pass.png" />
                </el-input>
              </div>
            </div>
            <div class="con-item">
              <div class="item-switch" @click="switchLogin()">切换登录</div>
            </div>
            <div class="con-item" >
             <div class="item-tip" v-if="isTip">
                您输入的账户有误，请重试
              </div>
            </div>
            <div class="con-item">
             <el-button class="login-btn" type="primary" @click="confirm">修改并登录</el-button>
            </div>
           
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      btnTitle: "获取验证码",
      disabled: false,
      phone: '',
      code:'',
      password: '',
      confirmPwd:'',
      checked:false,
      isTip:false
    };
  },
  created() {},
  methods: {
    confirm() {
        console.log("修改成功，登录成功")
        this.isTip = true
    },
    switchLogin(){
        this.$router.push("/");
    },
    bindSendCode() {
       this.$message("已发送验证码，请查收");
              this.disabled = true;
              this.btnTitle = "请稍候...";
              setTimeout(() => {
                this.doLoop();
      }, 500);
    },
    doLoop() {
      let seconds = 60;
      let countdown = setInterval(() => {
        if (seconds == 0) {
          clearInterval(countdown);
          this.disabled = false;
          this.btnTitle = "获取验证码";
        } else {
          this.btnTitle = seconds + "秒后重试";
          seconds--;
        }
      }, 1000);
    },
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: url(../../static/img/login_bg.png) no-repeat center;
  background-size: 100% 100%;
}
.login-wrap {
  margin: auto;
  width: 1200px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .login-left {
    flex: 1;
    position: relative;
    .login-ad {
      width: 500px;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      img {
        width: 100%;
      }
    }
  }
  .login-right {
    width: 500px;
    position: relative;
    .forget-pwd {
      width: 100%;
      position: absolute;
      top: 50%;
      padding: 50px;
      transform: translate(0, -50%);
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      .login-title {
        color: #004161;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 30px;
      }
      .login-con {
        width: 400px;
        margin: auto;
        .con-item {
          display: flex;
          margin-bottom: 20px;
          position: relative;
          .item-ipt {
            flex: 1;
            text-align: center;
            color: #AAAAAA;
            font-weight: 400;
            font-size: 16px;
            cursor: pointer;
            .login-ipt-img{
              width: 16px;
              margin-top: 12px;
            }
            .login-ipt {
              font-size: 16px;
            }
          }
          .item-tip{
            flex: 1;
            text-align: center;
            font-size: 12px;
            color: #F6402B;   
            font-weight: 400;
            line-height: 17px;
            opacity: 1;
          }
          .item-switch{
            flex: 1; 
            text-align: right;
            color: #222222;
            font-weight: 400;
            font-size: 14px;
            cursor: pointer;
          }
          .code-btn{
            // display: block;
            margin: 10px auto;
            width: 35%;
            height: 44px;
            border-radius: 50px;
            background-color: #55E4C2;
            border: #55E4C2;
            font-size: 14px;
          }
          .el-button-code-disabled {
            margin: 10px auto;
            width: 35%;
            height: 44px;
            border-radius: 50px;
            background-color: #d8d8d8;
            border: #d8d8d8;
            font-size: 14px;
          }
          .login-btn {
            display: block;
            margin: 10px auto;
            width: 100%;
            height: 60px;
            border-radius: 50px;
            background-color: #55E4C2;
            border: #55E4C2;
            font-size: 26px;
          }
          .login-method{
            flex: 1;
            padding-left: 70px;
            cursor: pointer;
          }
        }
      }
    }
    
  }
}


/deep/ .el-input__inner {
  &::placeholder {
    color: #999;
    font-size: 14px;
  }
}

/* 设置选中后的文字颜色 */
/deep/ .myRedCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #606266;
}
/* 设置选中后对勾框的边框和背景颜色 */
/deep/ .myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #55E4C2;
  background-color:#55E4C2;
}

/* 设置checkbox获得焦点后，对勾框的边框颜色 */
/deep/ .myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner{
  border-color: #55E4C2;
}

</style>
